<script setup>
import { storeToRefs } from 'pinia';
import { toRefs } from 'vue';
import { useCounterStore, useUserStore } from './store';

// user 模块
const user = useUserStore();

const counter = useCounterStore();
console.log('counter -----> ', counter);
// 并且会跳过所有的 action 或非响应式 (不是 ref 或 reactive) 的属性
// const { count, double, add, addAsync } = storeToRefs(counter);
const { count, double, add, addAsync } = toRefs(counter);
</script>

<template>
  <div>
    <div>user - {{ user.name }}</div>
    <h1>pinia - {{ counter.count }} - {{ counter.double }}</h1>
    <button @click="counter.add(1)">点我调用 同步 的 action</button>
    <button @click="counter.addAsync(10)">点我调用 异步 的 action</button>

    <div>----解构后-----</div>
    <div>{{ count }}</div>
    <div>{{ double }}</div>
    <button @click="add(1)">add</button>
    <button @click="addAsync(10)">addAsync</button>
  </div>
</template>
